<template>
  <view class="normal-login-container">
    <!--左侧输入框搜索-->
    <search placeholder="请输入车牌号/车架号" @input="inputChange">
      <view class="flex right20 align-center" slot="right">
        <!--右侧缩略搜索-->
        <uni-icons type="tune" :color="isAllEmpty(queryParams)?'#333':'#1890FF'" @click="handleOpen" size="25"/>
        <!--新增-->
        <uni-icons type="plus-filled" color="#1890FF" size="30" @click="handleToAdd"/>
      </view>
    </search>

    <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
      <view class="item-wrap" v-for="(item,index) in list" :key="index" @click="goDetail(item)">

        <view class="title-wrap lineBottom10">
          <text>{{ item.vinNo || '' }}</text>
          <text>{{ item.carNo || '' }}</text>
        </view>

        <view class="flex-row align-stretch">

          <view class="flex-col flex1">

            <view class="text-line">
              <text class="text-name">品牌车系车型:</text>
              <text class="text-value">
                {{ item.brandName|filterNull }}/{{ item.seriesName|filterNull }}/{{ item.modelName|filterNull }}
              </text>
            </view>

            <view class="text-line">
              <text class="text-name">车辆产权公司:</text>
              <text class="text-value">{{ item.propertyRightName|filterNull }}</text>
            </view>

            <view class="text-line">
              <text class="text-name">出险日期:</text>
              <text class="text-value">{{ item.accidentTime|filterNull }}</text>
            </view>

            <view class="text-line">
              <text class="text-name">商业险保单号:</text>
              <text class="text-value">{{ item.compulsoryPolicyNum|filterNull }}</text>
            </view>

            <view class="text-line">
              <text class="text-name">交强险保单号:</text>
              <text class="text-value">{{ item.commercialPolicyNum|filterNull }}</text>
            </view>

            <view class="text-line">
              <text class="text-name">理赔类别:</text>
              <text class="text-value">
                {{
                  item.settlementType === '1' ? '实物赔付申请' : item.settlementType === '2' ? '理赔款支付申请' : '-'
                }}
              </text>
            </view>

          </view>

        </view>

        <view class="btn-wrap lineTop20">
          <button size="mini"
                  v-if="['理赔款支付-已完成','实物赔付-已完成'].includes(item.settlementStatus)"
                  @click.stop="handleDelete(item)" type="warn">删除
          </button>
        </view>

      </view>
    </mescroll-body>

    <condition-search ref="refConditionSearch" v-model="queryParams" @reset="reset" @confirm="confirm"/>
    <uni-popup ref="message" type="center" class="popupClass" backgroundColor="#fff">
      <view class="popup-view">
        <view class="title-view">
          确定删除该数据
        </view>
        <view class="button-view">
          <view class="view-foot" @click.stop="dialogClose">取消</view>
          <view class="view-foot foot-left" @click.stop="dialogConfirm">同意</view>
        </view>
      </view>
    </uni-popup>

  </view>
</template>

<script>
import ConditionSearch from "./components/conditionSearch.vue";
import {getSettlementList, delSettlementList} from "@/api/insuranceSettlement";

export default {
  name: "list",
  components: {ConditionSearch},
  computed: {
    handleLabel() {
      return function (arr, type) {
        let name = "";
        arr.map((v) => {
          if (type == v.value) {
            name = v.label;
          }
        });
        return name;
      };
    },
  },
  watch: {},
  data() {
    return {
      list: [],
      carNoVinNo: null,
      queryParams: {
        carNoVinNo: '',
        settlementType: '',
        brandName: '',
        seriesName: '',
        modelName: '',
        propertyRightId: '',
      },
      allSel: false,
      maintenanceId: null,
      title: ''
    };
  },
  onLoad() {
    uni.$on('refBackList', call => {
      this.mescroll.triggerDownScroll();
    })
  },
  methods: {
    inputChange(val) {
      this.queryParams.carNoVinNo = val
      this.mescroll.resetUpScroll()
    },

    //搜索
    isAllEmpty() {
    },

    itemSel(item) {
      item.check = !item.check;
    },

    selAll() {
      this.allSel = !this.allSel;
      this.list.forEach((item) => {
        item.check = this.allSel;
      });
    },

    goBatchAdd() {
    },

    //打开搜索弹框
    handleOpen() {
      this.$refs.refConditionSearch.open();
    },

    //新增
    handleToAdd() {
      let url = `/pages/CarPage/newPage/addSettlement`;
      this.$tab.navigateTo(url);
    },

    //获取列表
    async upCallback(page) {
      var params = {
        pageNum: page.num,
        pageSize: page.size,
        ...this.queryParams,
      };
      try {
        const res = await getSettlementList(params);
        //设置列表数据
        if (page.num === 1) this.list = []; //如果是第一页需手动制空列表
        res.rows.forEach((item) => {
          item.check = false;
        });
        this.list = this.list.concat(res.rows); //追加新数据
        this.mescroll.endBySize(res.rows.length, res.total);
      } catch (e) {
        //联网失败, 结束加载
        this.mescroll.endErr();
      }
    },

    goDetail(val) {
      let url = `/pages/CarPage/insuranceSettlement/add?id=${val.maintenanceId}&type=view&flowId=${val?.flowId || null}`;
      this.$tab.navigateTo(url);
    },

    reset() {
      this.queryParams = {
        carNoVinNo: "",
        settlementType: '',
        brandName: '',
        seriesName: '',
        modelName: '',
        propertyRightId: '',
      };
      this.mescroll.resetUpScroll();
    },

    confirm(val) {
      this.queryParams = val;
      this.mescroll.resetUpScroll();
    },

    handleDelete(item) {
      this.maintenanceId = item.maintenanceId
      this.$refs.message.open()
    },

    dialogConfirm() {
      delSettlementList(this.maintenanceId).then(res => {
        if (res.code === 200) {
          this.$modal.msgSuccess("删除成功");
          this.$refs.message.close()
          this.mescroll.resetUpScroll();
        }
      })
    },

    dialogClose() {
      this.$refs.message.close()
    }
  },
};
</script>

<style scoped lang="scss">
.popupClass {
  .uni-dialog-title {
    display: none;
  }
}

.popup-view {
  background-color: #FFFFFF;
  width: 560rpx;
  height: 200rpx;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .title-view{
    width: 560rpx;
    height: 110rpx;
    font-size: 36rpx;
    text-align: center;
    line-height: 110rpx;
  }
  .button-view{
    width: 560rpx;
    display: flex;
    flex-direction: row;
    border-top:2rpx solid #f5f5f5;
    .view-foot{
      display: flex;
      flex: 1;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 90rpx;
      font-size: 36rpx;
    }
    .foot-left{
      border-left:2rpx solid #f5f5f5;
      color: #007aff;
    }
  }
}

</style>


